<template>
  <div>
    <div class="page-title">检查表配置</div>
    <div class="page-content">
      <el-form :model="filterQuery" inline>
        <el-form-item label="检查表名：">
          <el-input
            v-model="filterQuery.checkListName"
            placeholder="请输入检查表名"
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getCheckListData()">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="info" @click="downloadTemplate()"
            >下载检查表模板</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-upload
            :action="`/api/check_list_excel_upload`"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :on-success="handleSuccess"
            multiple
            :headers="{ Authorization: currentUser.token }"
            :file-list="fileList"
            accept=".excel,.xls,.xlsx"
          >
            <el-button type="success">新增检查表</el-button>
          </el-upload>
        </el-form-item>
      </el-form>

      <el-table
        :data="tableData"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
        border
      >
        <!-- <el-table-column type="index" label="序号"></el-table-column> -->
        <el-table-column label="检查表编号" prop="checkListCode"></el-table-column>
        <el-table-column
          label="检查表名"
          prop="checkListName"
        ></el-table-column>
        <el-table-column
          label="作业类型"
          prop="nameList"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-value="启用"
              inactive-value="停用"
              active-text="启用"
              inactive-text="停用"
              @change="handleCheckListStatus(scope.row, $event)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="warning"
              @click="editCheckList(scope.row)"
              size="small"
              >编辑</el-button
            >
            <el-button
              type="primary"
              @click="getCheckListItem(scope.row)"
              size="small"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-base">
        <el-pagination
          background
          @current-change="handlePageChange"
          :page-size="filterQuery.size"
          layout="total, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>

      <!-- 编辑检查表弹窗 -->

      <el-dialog
        title="编辑检查表"
        :visible.sync="editDialogVisible"
        width="60%"
      >
        <el-form label-width="100px">
          <el-form-item label="检查表名">
            <el-input
              style="width: 80%"
              v-model="updateCheckListData.checkListName"
            ></el-input>
          </el-form-item>
          <el-form-item label="作业类型">
            <el-checkbox-group v-model="checkedData">
              <el-checkbox
                v-for="item in checkListDict"
                :key="item.dictCode"
                :label="item.name"
              ></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateCheckList()">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  GetCheckList,
  UpdateCheckListStatus,
  GetCheckListDictCode,
  UpdateCheckList,
} from "../../../services/checkListManagement";
import { GetCurrentUser } from "../../../store/CurrentUser";

export default {
  data() {
    return {
      filterQuery: {
        checkListName: "",
        num: 0,
        size: 10,
      },
      tableData: [],
      checkedData: [],
      checkListDict: [],
      total: 0,
      editDialogVisible: false,
      checkListStatus: {
        checkListID: "",
        status: "",
      },
      fileList: [],
      updateCheckListData: {
        checkListCode: "",
        checkListID: "",
        checkListName: "",
        jobTypeCodeList: "",
        nameList: "",
        status: "",
      },
    };
  },
  computed: {
    currentUser() {
      return GetCurrentUser();
    },
  },
  mounted() {
    this.getCheckListData();
    this.getCheckListDict();
  },
  methods: {
    getCheckListDict() {
      GetCheckListDictCode().then((res) => {
        this.checkListDict = res.data;
      });
    },
    getCheckListData() {
      GetCheckList(this.filterQuery).then((res) => {
        this.tableData = res.data.list;
        this.total = res.data.total;
      });
    },
    handleCheckListStatus(row, val) {
      this.$confirm("是否" + val + "该检查表?", "提示", {
        confirmButtonText: "是",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.checkListStatus.checkListID = row.checkListID;
          this.checkListStatus.status = val;
          UpdateCheckListStatus(this.checkListStatus).then(() => {
            this.$message.success("操作成功！");
            this.getCheckListData();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消该操作",
          });
          this.getCheckListData();
        });
    },
    editCheckList(row) {
      this.editDialogVisible = true;
      if (row.nameList == "" || row.nameList == undefined) {
        this.checkedData = [];
      } else {
        this.checkedData = row.nameList.split(",");
      }
      this.updateCheckListData.checkListCode = row.checkListCode;
      this.updateCheckListData.checkListID = row.checkListID;
      this.updateCheckListData.checkListName = row.checkListName;
      this.updateCheckListData.status = row.status;
    },
    getCheckListItem(row) {
      // console.log(123,row);
      row = JSON.stringify(row);
      this.$router.push({
        path: "/nav2/checkListManagement/checkListItem",
        query: { row },
      });
    },
    handlePageChange(page) {
      this.filterQuery.num = page;
      this.getCheckListData();
    },
    downloadTemplate() {
      var url = "http://39.98.173.131:8080/CheckList/检查表模板.xlsx";
      try {
        var elemIF = document.createElement("iframe");
        elemIF.src = url;
        elemIF.style.display = "none";
        document.body.appendChild(elemIF);
      } catch (e) {
        alert("下载异常！");
      }
      this.getCheckListData();
    },
    handlePreview(file) {
      console.log(file);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handleSuccess(response) {
      if (response.code == 1000) {
        this.$message.success(response);
      } else {
        this.$message.warning(response);
      }
    },
    updateCheckList() {
      var nameList = this.checkedData.join(",");
      var jobTypeCodeList = [];
      this.updateCheckListData.nameList = nameList;
      this.checkListDict.map((item) => {
        for (var i in this.checkedData) {
          if (item.name == this.checkedData[i]) {
            jobTypeCodeList.push(item.dictCode);
          }
        }
      });
      this.updateCheckListData.jobTypeCodeList = jobTypeCodeList.join(",");
      UpdateCheckList(this.updateCheckListData)
        .then(() => {
          this.$message.success("修改检查表成功！");
          this.editDialogVisible = false;
          this.getCheckListData();
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
  },
};
</script>

<style>
.el-table th {
  display: table-cell !important;
}

.el-checkbox {
  width: 150px;
}

.el-checkbox__label {
  font-size: 15px;
}
</style>